<template>
    <div>
        <div class="searchInput">
      <div class="left">
        <img src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png" alt="" class="logo">
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
      </div>
      <div class="right">
        <input placeholder="小米" type="text" v-model="search" @keyup.enter="gosearch"> <span class="iconfont" @click="gosearch"></span>
      </div>
    </div>
    </div>
</template>

<script>
import {qsearch} from "../request/goods/goods";
export default {
    name: 'VueInputgoods',

    data() {
        return {
            search:"",
            list:[],
        };
    },

    mounted() {
        
    },
    methods: {
      async  gosearch(){
            if(this.search==""){
                this.search="小米";
            }
           qsearch({query:this.search}).then((res) => {
           }).catch((err) => {
               
           });
           await this.$router.push({
               name:"goodslist",
               query:{url:"?"+"query"+"="+this.search}
           });
           this.search="";
        }
    },
};
</script>

<style  scoped>
.searchInput {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.searchInput .logo {
  height: 46px;
}
.searchInput input {
  width: 700px;
  height: 40px;
  border: 3px solid #f00;
  line-height: 46px;
  text-indent: 2em;
}
::-webkit-input-placeholder {
  text-indent: 2em;
}

.searchInput .iconfont {
  height: 46px;
  width: 46px;
  display: inline-block;
  background-color: #f00;
  vertical-align: middle;
  background-image: url(https://pic.imgdb.cn/item/61d954c32ab3f51d91f855cd.png);
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  margin-left: -10px;
}
</style>